<template>
	<view class="promoter">
		<!-- 自定义导航 -->
		<u-navbar :customBack="handleBack" title="成为推广员" :background="background"
			title-color="#101010" back-icon-color="#101010"></u-navbar>
		
		<!-- 富文本正文 -->
		<view class="content-box">
			<u-parse :html="detail.promoter_explain" :tag-style="tagStyle"></u-parse>
			<!-- <u-parse :html="content" :tag-style="tagStyle"></u-parse> -->
		</view>
		
		<!-- 底部按钮 -->
		<view @click="wechatPay()" class="button bold">{{detail.promoter_pay_money || '--'}}元 成为推广员</view>
		
		<!-- 提示信息 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex"
	
	export default {
		data() {
			return {
				background:{
					backgroundColor: '#FFFFFF'
				},
				detail: {},
				content: `
					<p>成为推广员，在线上或线下摆个摊</p>
					<p>加入我们拯救单身狗的大军！</p>
					<p>当然不是白干！</p>
					<p>你推广产生的收益可获得50%</p>
					<p>当然，咱做这些怎么会是为了钱</p>
					<p>还不是为国出力，提高结婚率</p>
					<p>从而提高生育率，减慢老龄化</p>

					<p>这么伟大的工作，一定要有点门槛</p>
					<p>考公务员都还得交报名费不是？</p>

					<p>成为推广员，限时特价30元</p>
					<p>快上车，暂时只开100名</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
				tagStyle: {
					p: 'color: #666666; font-size: 28rpx; line-height: 44rpx; margin-bottom: 28rpx;',
					span: 'color: #666666; font-size: 28rpx; line-height: 44rpx;',
					img: 'max-width: 690rpx; margin-top: 28rpx;'
				}
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			...mapActions(['setUser']),
			handleBack() {
				this.back()
			},
			// 微信支付
			wechatPay() {
				let _this = this;
				wx.requestPayment({
					..._this.detail.payment,
					success(res) {
						
						_this.getMine()
					},
					fail(err) {
						
						_this.$refs.uToast.show({
							title: '支付失败！',
							type: 'error',
						})
					},
					complete(res) {
						
					}
				})
			},
			getMine() {
				this.$net.req('/user/getMine', {}).then(res => {
					if (res.code === 200) {
						this.setUser(res.data)
						this.back()
					}
				})
			},
			getInfo() {
				this.$net.req('/promoter/apply',{}).then(res=>{
					if(res.code == 200){
						this.detail = res.data
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.promoter {
		min-height: 100vh;
		padding: 48rpx 30rpx 58rpx;
		background-color: #FFFFFF;
		
		.content-box {
			padding-bottom: 206rpx;
		}
		
		.button {
			width: 690rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 32rpx;
			color: #2F2E3B;
			background: #DFC791;
			border: 3rpx solid #2F2E3B;
			border-radius: 16rpx;
			position: fixed;
			bottom: 110rpx;
			left: 30rpx;
		}
	}
</style>
